<template>
	<view>
		<!-- 		<view class="indextabs">
			<fui-tabs :tabs="tabs" :current="tabIndex" selectedColor="#000" :short="false" background="none" />
			<view style="width:300rpx"></view>
		</view> -->
		<view class="indexbody">
			<swiper :current="tabIndex" :duration="300" @change="tabChange" class="swiper">
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :show-scrollbar="false" class="swiper">
						<view class="publicItemBox">
							<view class="publicItem" v-for="(item, index) in PublicItemList">
								<view class="itemClass">{{ item.ItemClass }}</view>
								<view>
									<view class="item" v-for="(itm,idx) in item.ItemList" @click="goPublic(itm)">
										{{ itm.ItemName }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['同城', '动态', '活动', '任务'],
				tabIndex: 0,
				PublicItemList: [{
						ItemClass: '闲来无事',
						ItemList: [{
								ItemName: '发动态',
								id: 1,
							},
							{
								ItemName: '发推荐',
								id: 2,
							},
							{
								ItemName: '发招聘',
								id: 3,
							},
							{
								ItemName: '发商品',
								id: 4,
							},
							{
								ItemName: '发任务',
								id: 5,
							},
							{
								ItemName: '发活动',
								id: 6,
							},
							{
								ItemName: '发模卡',
								id: 7,
							},
						]
					},
					// {
					// 	ItemClass: '创业赚钱',
					// 	ItemList: [{
					// 			ItemName: '发广告',
					// 			id: 1,
					// 		},
					// 		{
					// 			ItemName: '发商品',
					// 			id: 2,
					// 		},
					// 		{
					// 			ItemName: '发招聘',
					// 			id: 3,
					// 		},
					// 		{
					// 			ItemName: '发促销',
					// 			id: 4,
					// 		},
					// 		{
					// 			ItemName: '发活动',
					// 			id: 5,
					// 		},
					// 		{
					// 			ItemName: '发闲置',
					// 			id: 6,
					// 		},
					// 		{
					// 			ItemName: '发任务',
					// 			id: 7,
					// 		},
					// 		{
					// 			ItemName: '发课程',
					// 			id: 8,
					// 		},
					// 	]
					// }
				]
			};
		},
		onShow() {
			uni.setTabBarStyle({
				backgroundColor: '#FFF', // 需要设置的背景颜色值
				success: function() {
					console.log('TabBar backgroundColor changed successfully');
				},
				fail: function(err) {
					console.error('Failed to change TabBar backgroundColor:', err);
				}
			});
		},
		methods: {
			// 去发布
			goPublic(item) {
				console.log('item:', item);
				// 发推荐
				if (item.id == 2) {
					uni.navigateTo({
						url: '/publicPages/advetr/form'
					});
				}
				// 发招聘
				if (item.id == 3) {
					uni.navigateTo({
						url: '/publicPages/recruit/form'
					});
				}
				// 发商品
				if (item.id == 4) {
					uni.navigateTo({
						url: '/publicPages/goods/form'
					});
				}
				// 发动态
				if (item.id == 1) {
					uni.navigateTo({
						url: '/publicPages/dynamic/form'
					});
				}
				// 发任务
				if (item.id == 5) {
					uni.navigateTo({
						url: '/publicPages/task/form'
					});
				}

				// 发活动
				if (item.id == 6) {
					uni.navigateTo({
						url: '/publicPages/activity/form'
					});
				}
				// 发模卡
				if (item.id == 7) {
					uni.navigateTo({
						url: '/moka/pages/makeMoka'
					});
				}


			},
			tabChange(e) {
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.indextabs {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		display: flex;
		margin-top: 70rpx;
	}

	.indexbody {
		width: 100vw;
		background-color: #FFF;
		min-height: 100vh;
		transition: transform 0.5s;
		padding-top: 190rpx;
	}

	.swiper {
		width: 100vw;
		height: calc(100vh - 190rpx);
		position: relative;
	}

	.publicItem {
		clear: both;
		margin-top: 30rpx;
		padding: 30rpx;
		padding-top: 100px;

		.item {
			float: left;
			width: 300rpx;
			height: 80rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: #f0f0f0;
			color: #333;
			margin: 20rpx
		}
	}
</style>